import TRAININGREASON from '@/assets/image/training-reason.png';
import { DeleteOutlined } from '@ant-design/icons/lib/icons';
import { Button, Dropdown, Modal, Tooltip } from 'antd';
import _ from 'lodash';
import moment from 'moment';
import React, { useRef, useState } from 'react';
import './index.less';

const LongDocItem: React.FC<any> = (props: any) => {
  const { item, deleteItem, boxWidth, deleteShow } = props;
  const [dleOpen, setDelOpen] = useState(false);
  const [detailOpen, setDetailOpen] = useState(false);
  const [cognitionId, setCognitionId] = useState('');

  const dropdown_items = [
    {
      label: (
        <div>
          <DeleteOutlined />
          <span style={{ marginLeft: '5px' }}>删除</span>
        </div>
      ),
      key: 'delete',
    },
  ];

  const onConfirm = async () => {
    setDelOpen(false);
    if (deleteItem) {
      deleteItem(cognitionId);
    }
  };

  const showModal = (id: any) => {
    setCognitionId(id);
    setDelOpen(true);
  };

  const onClick: (v: any, item: any) => void = (v, item) => {
    v.domEvent.stopPropagation();
    if (v.key === 'delete') {
      showModal(item.id);
    }
  };

  const modalTitle = () => {
    return (
      <div>
        <div className="second-class">
          {item.second_class && item.showTag && (
            <div
              className="class-type"
              style={{
                color: item.color ? item.color : '',
                background: item.background ? item.background : '',
              }}
            >
              {item.second_class}
            </div>
          )}
          {item.detail && _.has(item.detail, 'training_reason') && item.detail.training_reason && (
            <Tooltip
              placement="top"
              title={item.detail.training_reason}
              arrow={true}
              className="m-l-23"
            >
              <img src={TRAININGREASON} alt="" width={15} height={15} />
            </Tooltip>
          )}
        </div>
        <div className="ant-modal-title f-s-24">{item.subject}</div>
      </div>
    );
  };
  const articleElement = useRef<any>(null);
  //显示示例
  const showDetail = (event: any, item: any) => {
    event.stopPropagation(); //阻止冒泡
    setDetailOpen(true);
    //将\n替换成p标签包裹文字
    const mainBody = item.main_body
      .split('\n')
      .map((paragraph: any) => `<p>${paragraph}</p>`)
      .join('');
    articleElement.current = React.createElement('div', {
      dangerouslySetInnerHTML: { __html: mainBody },
    });
  };

  return (
    <div
      className="long-doc-card"
      onClick={(e) => showDetail(e, item)}
      style={{ width: boxWidth ? boxWidth : '' }}
    >
      {item.second_class && item.showTag && (
        <div
          className="class-type"
          style={{
            color: item.color ? item.color : '',
            background: item.background ? item.background : '',
          }}
        >
          {item.second_class}
        </div>
      )}
      {item.detail && item.detail.training_reason && _.has(item.detail, 'training_reason') && (
        <Tooltip
          placement="top"
          title={item.detail.training_reason}
          arrow={true}
          className="long-doc-reason"
        >
          <img src={TRAININGREASON} alt="" onClick={(e) => e.stopPropagation()} />
        </Tooltip>
      )}
      {item.subject && item.showTitle && (
        <div className="card-title">
          <div className="rate-circle f-s-14"></div>
          <div className="m-l-10">{item.subject}</div>
        </div>
      )}
      <div className="card-content">{item.main_body}</div>
      <div className="card-foot">
        <div className="upd-time flex">
          <div className="flex">
            {/* {`我${item.scope_class === 'MY_TRAIN' ? '训练' : '收藏'}于 ${formatAtTime(
              item.release_time,
            )}`} */}
            {_.has(item, 'ref_count') && (
              <span>引用 {item.ref_count ? item.ref_count : '0'} 次</span>
            )}
            <span className="m-l-17">更新于 {moment(item.updated_at).format('YYYY/MM/DD')}</span>
          </div>
          {item.source_url && (
            <div className="source" onClick={(e) => e.stopPropagation()}>
              {item.source_url}
            </div>
          )}
        </div>
        {deleteShow && (
          <Dropdown menu={{ items: dropdown_items, onClick: (v) => onClick(v, item) }}>
            <div className="card-more" onClick={(e) => e.stopPropagation()}>
              ...
            </div>
          </Dropdown>
        )}
      </div>
      {/* 查看详情 */}
      <Modal
        centered
        className="detail-modal"
        title={[modalTitle()]}
        open={detailOpen}
        onCancel={(e) => {
          e.stopPropagation();
          setDetailOpen(false);
        }}
        width={650}
        footer={[
          <div className="flex" key={item.id}>
            <div className="flex-aitem-center" style={{ height: '100%' }}>
              <div className="gray-color f-s-12 flex" style={{ alignItems: 'baseline' }}>
                <div className="flex">
                  {/* {`我${item.scope_class === 'MY_TRAIN' ? '训练' : '收藏'}于 ${formatAtTime(
                    item.release_time,
                  )}`} */}
                  {_.has(item, 'ref_count') && (
                    <span>引用 {item.ref_count ? item.ref_count : '0'} 次</span>
                  )}
                  <span className="m-l-17">
                    更新于 {moment(item.updated_at).format('YYYY/MM/DD')}
                  </span>
                </div>
                {item.source_url && (
                  <div className="source" onClick={(e) => e.stopPropagation()}>
                    {item.source_url}
                  </div>
                )}
              </div>
            </div>
          </div>,
        ]}
      >
        {articleElement.current}
      </Modal>
      {/* 删除文档 */}
      <Modal
        title="确认删除"
        open={dleOpen}
        onOk={(e) => {
          e.stopPropagation();
          onConfirm();
        }}
        onCancel={(e) => {
          e.stopPropagation();
          setDelOpen(false);
        }}
        width={350}
        okText="确认"
        cancelText="取消"
        footer={[
          <Button
            key="back"
            onClick={(e) => {
              e.stopPropagation();
              setDelOpen(false);
            }}
          >
            取消
          </Button>,
          <Button
            type="primary"
            danger
            onClick={(e) => {
              e.stopPropagation();
              onConfirm();
            }}
            key="confirm"
          >
            确认
          </Button>,
        ]}
      >
        <p>确定删除该文档吗?</p>
      </Modal>
    </div>
  );
};

export default LongDocItem;
